<template>
	<view>
		<hx-navbar :border="false" :centerSlidiSwitch="true" :rightSlidiSwitch="false" :fixed="true"
			:backgroundColor="[36,147,241]" :pageScroll.sync="scrollData">
			<view style="text-align: center;width: 100%;color: #fff;">
				<text>提交订单</text>
			</view>
			<view slot="centerAfter" @click="selectAddr" style="text-align: center;width: 100%;">
				<text>选择收获地址</text>
			</view>
		</hx-navbar>
		<view class="head tab-right-active">
			<view class="tab-box" v-if="tabIndex>0&&id!=17">
				<view class="item left" :class="{'active':tabIndex == 1}" @click="tabIndex = 1">
					<view class="tit-box">
						<text>配送</text>
					</view>
				</view>
				<view class="item right" :class="{'active':tabIndex == 2}" @click="tabIndex=2">
					<view class="tit-box">
						<text>到店自取</text>
					</view>
				</view>
			</view>
			<view class="container head-bottom"
				:class="{'selectOne': tabIndex == 1&&id!=17,'selectTow':tabIndex == 2&&id!=17,'selectThree':id==17}">
				<view class="tab" v-if="tabIndex == 2">
					<view class="askFor flex-a">
						<!-- <view class="addr">上饶市信州区上饶铁路站房以南站南一路交</view> -->
						<!-- <view class="content">
							<map id="map" class="map" :show-location="true" :latitude="latitude"
								:longitude="longitude"></map>
								</view> -->
						<view class="t-top-box" @click="selectAddr">
							<block v-if="addressData">
								<view class="address flex-b flex-a">
									<text>{{addressData?addressData.address+addressData.detAddress:'请选择收货地址'}}</text><uni-icons
										type="right" size="20" color="#333"></uni-icons>
								</view>
								<view class="phone"><text>{{addressData.name||''}} <text
											style="padding: 0 5rpx;"></text> {{addressData.phone||''}}</text></view>
							</block>
							<block v-else>
								<text class="txt1">选择收货地址</text>
								<i class="hxicon-right icon1"></i>
							</block>
						</view>
					</view>
					<!-- <view class="time flex-a">
						<view class="left">
							<view>自取时间</view>
							<view>10:41 <text>></text></view>
						</view>
						<view class="right">
							<view>预留电话</view>
							<view><input class="uni-input" type="number" placeholder="请输入预留手机号" /></view>
						</view>
					</view>
					<view class="agree">
						<checkbox value="agree" />
						同意并接受<text>《到店自取服务协议》</text>
					</view> -->
				</view>
				<view class="tab" v-else>
					<view class="t-top">
						<view class="t-top-box" @click="selectAddr">
							<block v-if="addressData">
								<view class="address flex-b flex-a">
									<text>{{addressData?addressData.address+addressData.detAddress:'请选择收货地址'}}</text><uni-icons
										type="right" size="20" color="#333"></uni-icons>
								</view>
								<view class="phone"><text>{{addressData.name||''}} <text
											style="padding: 0 5rpx;"></text> {{addressData.phone||''}}</text></view>
							</block>
							<block v-else>
								<text class="txt1">选择收货地址</text>
								<i class="hxicon-right icon1"></i>
							</block>
						</view>
						<view v-if="id==17" class="t-top-express">
							<view class="title">快递发货</view>
							<view class="tip">支付后最晚预计48小时由商家发货</view>
						</view>
					</view>
					<!-- <view class="t-bb"></view> -->
					<!-- <view class="t-bottom">
						<view class="row1">
							<view class="left">
								<text>送达时间</text>
							</view>
							<view class="right">
								<text>未选择(必选)</text>
								<i class="hxicon-right"></i>
							</view>
						</view>
						<view class="row2">
							<text>为减少接触，封闭管理时，请在地址中更新具体去餐点</text>
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="b-r m-t container p12">
			<view class="store" v-for="ele in storeData" :key="ele.id">
				<view class="name flex-a">
					<img :src="ele.image" alt="">
					<text>{{ele.storeName}}</text>
					<!-- 标志性位置 ，社区  如：白羊区店，玫瑰园小区 -->
					<!-- <text v-if="storeData.community">({{storeData.community}})</text> -->
				</view>
				<!-- <view class="p-bb b-b"></view> -->
				<view class="goods-box">
					<block v-for="(goods,i) in ele.list" :key="i" v-if="ele.list">
						<view class="goods-item">
							<view class="left">
								<image :src="goods.image" mode="aspectFit"></image>
							</view>
							<view class="right">
								<view class="row1">
									<view class="tit">
										<text class="zk"
											v-if="goods.oldprice && Number(goods.price) < Number(goods.oldprice)">折</text>
										<text>{{goods.prodName}}</text>

									</view>
									<!-- <view class="old-price" v-if="goods.price">
										<text class="fh">￥</text><text class="lt">{{goods.price}}</text>
									</view> -->
									<view class="price">
										<text class="fh">￥</text><text>{{goods.price}}</text>
									</view>
								</view>
								<view class="row2">
									<text>{{goods.descripe}}</text>
								</view>
								<view class="row3">
									x<text>{{goods.num}}</text>
								</view>
							</view>
						</view>
					</block>
				</view>
				<!-- 优惠券立减 -->
				<!-- <view class="zhekou-box">
					<block v-for="(item,i) in couponData" :key="i">
						<view class="zhekou">
							<view class="flex-rl  row1">
								<view class="left">
									<i class="hxicon" :class="item.icon"></i>
									<text class="tit">{{item.name}}</text>
								</view>
								<view class="right">
									<view class="tag1">
										<text>{{item.fullKey}}减{{item.lessPrice}}</text>
									</view>
								</view>
							</view>
							<view class="row2" v-if="item.remark">
								{{item.remark}}
							</view>
						</view>
					</block>
				</view> -->
				<view class="p-bb b-b"></view>
				<view class="coupon-t flex-a flex-b">
					<view class="left">红包/抵用券</view>
					<view class="right" @click="openCoupon"><text class="t" v-if="lessPrice<=0">未选红包</text><text v-else style="color:#FF6C49">{{'-'+lessPrice}}</text><uni-icons type="right" size="14"
							color="#D7D7D7"></uni-icons></view>
				</view>
				<view class="flex-rl totalbox">
					<view class="left">
						<text>优惠规则</text>
						<i class="hxicon-question"></i>
					</view>
					<view class="right">
						<view class="yh">
							<text class="txt">已优惠</text>
							<text class="fh">￥</text>
							<text class="num">{{lessPrice}}</text>
						</view>
						<view class="total">
							<text class="txt">小计</text>
							<text class="fh">￥</text>
							<text class="num">{{totalPrice-lessPrice}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="b-r m-t container p12 other-box">
			<view class="flex-rl row">
				<view class="left">
					<text>备注</text>
				</view>
				<view class="right">
					<!-- <text v-if="remark">{{remark}}</text> -->
					<textarea v-model="remark" placeholder="填写备注" auto-height />
					<i class="hxicon-right"></i>
				</view>
			</view>
		</view>
		<view class="body-end"></view>
		<view class="foot">
			<view class="left">
				<view class="price">
					<text class="fh">￥</text>
					<text class="txt">{{totalPrice-lessPrice}}</text>
				</view>
				<view class="discount" v-if="lessPrice">
					<text>已优惠￥{{lessPrice}}</text>
				</view>
			</view>
			<!-- <view class="center">
				<text>找人付</text>
			</view> -->
			<view class="right" @click="submit">
				<text>提交订单</text>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" @change="closePop">
			<view class="popup-coupon">
				<view class="title">红包优惠</view>
				<view class="list">
					<view class="item flex-a flex-b" v-for="(item, index) in couponData" :key="item">
						<view class="flex-a">
							<view class="left">
								<view>￥{{ item.lessPrice }}</view>
								<view>{{ item.name }}</view>
							</view>
							<view class="middle">
								<view>{{ item.remark||'' }}</view>
								<view>{{ item.endDate||'' }}</view>
							</view>
						</view>
						<view class="right">
							<checkbox-group @change="e=>changeBox(e,index)">
								<checkbox :checked="item.checkbox" />
							</checkbox-group>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getDefaultAddr,
		getStoreCup,
		addOrder
	} from '@/api/user.js'
	import {
		getCartList
	} from '@/api/order.js'
	const img = '/static/pic/logo.svg';
	export default {
		data() {
			return {
				id: '',
				latitude: 23.099994,
				longitude: 113.324520,
				storeNo: '',
				prodIds:'',
				productAttrUniqueS:[],
				agree: false,
				scrollData: {},
				//购物车缓存 Storage 名称
				shoppingCartStorageName: 'cart',
				//门店信息
				storeData: [],
				//购物车
				shoppCart: [],
				//头部选项卡 参数为 0不显示选项卡,1,2
				tabIndex: 1,
				//收获地址
				addressData: {},
				//手机隐私
				ysStatus: true,
				//优惠券
				couponData: [],
				//结算价
				totalPrice: 0,
				//已优惠价
				totalYhPrice: 0,
				//商品数量
				totalNumber: 0,
				remark: "",
				val: '',
				cartId: '',
				lessPrice:0,
				couponNo:''
			}
		},
		onLoad(option) {
			let that = this
			let totalPrice = 0
			let totalNumber = 0
			let totalOldPrice = 0
			if (option.prodIds&&option.storeNo) {
				that.prodIds = option.prodIds
				// console.log(that.productAttrUniqueS)
				that.getStoreCup(option.storeNo) //获取店铺优惠券
				getCartList({
					page: 1,
					limit: 10,
					isValid: true,
					productAttrUniqueS:that.prodIds,
				}).then((res) => {
					that.storeData = res.data
				})
			}else if (option.storeNo) {
				that.storeNo = option.storeNo
				that.getStoreCup(option.storeNo) //获取店铺优惠券
				getCartList({
					page: 1,
					limit: 10,
					isValid: true,
					storeNo: that.storeNo ,
				}).then((res) => {
					that.storeData = res.data
				})
			}
			// console.log("测试1：")
			// console.log(option)
			if (option.cartId) {
				that.cartId = option.cartId
			}
			if (option.id) {
				that.id = option.id
			}
			if (option.goodsTotalPrice) {
				that.totalPrice = option.goodsTotalPrice
				console.log(that.totalPrice)
			}
			if (option.sid) {
				let carts = uni.getStorageSync(that.shoppingCartStorageName) || []
				console.log("11111")
				console.log(carts)
				if (carts) {
					//根据缓存数据 获取购物车中属于本商店的商品
					for (let i in carts) {
						if (carts[i].store_id == option.sid) {
							that.shoppCart = carts[i].shopping_cart;
							that.storeData = carts[i]
							break;
						}
					}
				}
				let cj = 0
				let op = 0
				let p = 0
				let num = 0
				//计算总商品数量和总价
				for (var i in that.shoppCart) {
					p = Number(that.shoppCart[i].price);
					op = Number(that.shoppCart[i].oldprice);
					num = Number(that.shoppCart[i].number)
					totalNumber += num
					totalPrice += p * num
					if (op > p) {
						cj += (op - p) * num
					}
				}
				that.totalPrice = totalPrice
				that.totalYhPrice = cj
			}
		},
		onShow() {
			this.getDefaultAddr()
		},
		onReady() {
			this._mapContext = uni.createMapContext("map", this);
			// 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
			this._mapContext.initMarkerCluster({
				enableDefaultStyle: false,
				zoomOnClick: true,
				gridSize: 60,
				complete(res) {
					console.log('initMarkerCluster', res)
				}
			});

			this._mapContext.on("markerClusterCreate", (e) => {
				console.log("markerClusterCreate", e);
			});

			this.addMarkers();
		},
		onPageScroll(e) {
			this.scrollData = e;
		},
		methods: {
			//获取默认地址
			getDefaultAddr() {
				getDefaultAddr().then(res => {
					if (res.code == 200) {
						this.addressData = res.data ? res.data : ''
					}
				})
			},
			openCoupon() {
				this.$refs.popup.open()
			},
			closePop(e){
				let list=this.couponData
				console.log(this.couponData)
				let n =list.findIndex(item=>{
					return item.checkbox==true
				})
				if(n==-1){
					this.lessPrice=0
					this.couponNo=''
				}else{
					this.lessPrice=list[n].lessPrice
					this.couponNo=list[n].no
				}
			}, 
			changeBox(e,i){
				let value=e.detail.value[0]
				let list=this.couponData
				console.log(value)
				if(value==''){
					list.forEach((item,index)=>{
						if(i==index){
							item.checkbox=true
						}else{
							item.checkbox=false
						}
					})
				}else if(value==undefined){
					list.forEach((item,index)=>{
						item.checkbox=false
					})
				}
				
			},
			//获取店铺优惠券
			getStoreCup(storeNo) {
				getStoreCup(storeNo).then(res => {
					if (res.code == 200) {
						let list=res.data
						list.forEach(item=>{
							item.checkbox=false
						})
						this.couponData = list
						console.log(this.couponData)
					}
				})
			},
			addMarkers() {
				const positions = [{
					latitude: 23.099994,
					longitude: 113.324520,
				}, {
					latitude: 23.099994,
					longitude: 113.322520,
				}, {
					latitude: 23.099994,
					longitude: 113.326520,
				}, {
					latitude: 23.096994,
					longitude: 113.329520,
				}]

				const markers = []

				positions.forEach((p, i) => {
					console.log(i)
					markers.push(
						Object.assign({}, {
							id: i + 1,
							iconPath: img,
							width: 25,
							height: 25,
							joinCluster: true, // 指定了该参数才会参与聚合
						}, p)
					)
				})
				this._mapContext.addMarkers({
					markers,
					clear: false,
					complete(res) {
						console.log('addMarkers', res)
					}
				})
			},
			privacyStatusChange(e) {
				this.ysStatus = e.target.value
			},
			// 选择送达地址
			selectAddr() {
				uni.navigateTo({
					url: '/pages/users/user_address_list/index'
				})
			},
			//提交订单
			submit() {
				let that = this
				let goodsID = []
				for (var i in that.shoppCart) {
					goodsID.push(that.shoppCart[i].id)
				}
				let data = {
					//商品id
					goods: goodsID,
					//使用的优惠券 id
					coupon: [],
					//手机隐私
					privacy_status: that.ysStatus ? 1 : 0
				}
				//向后台发送 data 进行真实合计，生成订单，并返回订单信息
				//模拟请求数据
				uni.showLoading({
					title: '正在生成订单'
				});
				//提交生成订单
				addOrder({
					storeNo: that.storeNo,
					cartId: that.cartId,
					price: that.totalPrice-this.lessPrice,
					cupNo: this.couponNo,
					addressId: that.addressData.id,
					type: that.tabIndex - 1,
					remark: that.remark
				}).then(res => {
					if (res.code == 200) {
						uni.hideLoading()
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/store/pay?id=' + res.data.did + '&price=' + res.data
									.price + '&title=' + res.data.title + '&time=' + res.data.time
							})
						}, 500)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.uni-popup .uni-popup__wrapper {
		width: 100%;
		background: #fff !important;
	}
	.uni-popup{
		z-index: 9999 !important;
	}
	.b-r {
		border-radius: 6px;
	}

	.m-t {
		margin-top: 6px;
	}

	.p-bb {
		margin: 16px 0;
		height: 1px;
		//background:  #E4E7ED;
	}

	.flex-rl {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.container {
		margin-left: 12px;
		margin-right: 12px;
		background-color: #ffffff;
	}

	.p12 {
		padding: 12px;
	}

	.head {
		background: linear-gradient(to bottom, #2493F1, #2493F1);

		padding-top: 20px;

		.tab-box {
			position: relative;
			height: 40px;
			margin: 0 12px;

			.item {
				position: absolute;
				top: 0;
				bottom: 0;
				height: 40px;
				text-align: center;
				font-size: 14px;

				width: 50%;

				.tit-box {
					position: relative;
					height: 36px;
					line-height: 36px;
					border-top-left-radius: 6px;
					border-top-right-radius: 6px;
					background-color: rgba(#ffffff, .6);
					width: 100%;
				}
			}

			.item:first-child {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: flex-end;
				left: 0;
			}

			.item:last-child {
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: flex-end;
				right: 0;
			}

			.active {
				height: 40px;
				width: 51%;
				font-weight: bold;

				.tit-box {
					height: 40px;
					line-height: 40px;
					background-color: rgba(#ffffff, 1);
				}

			}

			.left .tit-box {
				margin-left: 12px;
				margin-right: -12px;
				padding-right: 12px;
			}

			.right .tit-box {
				margin-right: 12px;
				margin-left: -12px;
				padding-left: 12px;
			}

			.left.active .tit-box {
				margin: 0;
			}

			.right.active .tit-box {
				margin: 0;
			}

			.left.active .tit-box:after {
				content: '';
				position: absolute;
				right: -12px;
				bottom: 0;
				border-top: 12px solid transparent;
				border-right: 12px solid transparent;
				border-bottom: 36px solid #ffffff;
			}

			.right.active .tit-box:after {
				content: '';
				position: absolute;
				left: -12px;
				bottom: 0;
				border-top: 12px solid transparent;
				border-left: 12px solid transparent;
				border-bottom: 36px solid #ffffff;
			}
		}

		.head-bottom {
			overflow: hidden;
			background: #ffffff;
			border-top-left-radius: 6px;
			border-top-right-radius: 6px;
			border-bottom-left-radius: 6px;
			border-bottom-right-radius: 6px;

			.tab {

				.t-top {

					&-box {
						margin: 0;
						padding: 12px;
						width: 100%;

						.address {
							font-size: 34rpx;
							color: #333;
						}

						.phone {
							font-size: 26rpx;
							color: #999;
						}

						.txt1 {
							font-size: 18px;
							color: #888;
						}

						.icon1 {
							margin-left: 8px;
							color: #bbb;
						}
					}

					&-box:active {
						background-color: #f5f5f5;
					}

					&-express {
						padding: 0 0 5px 12px;

						.title {
							color: #333;
							font-size: 30rpx;
						}

						.tip {
							color: #2493F1;
							font-size: 26rpx;
						}
					}
				}

				.t-bb {
					margin: 0 12px;
					height: 0.5px;
					background-color: #E4E7ED;
				}

				.t-bottom {
					padding: 12px;

					.row1 {
						display: flex;
						flex-direction: row;
						justify-content: space-between;

						//padding: 12px 0 0;
						.left {
							font-size: 14px;
							font-weight: bold;
						}

						.right {
							font-size: 14px;
							color: #2493F1;

							i {
								margin-left: 8px;
								color: #bbb;
							}
						}
					}

					.row2 {
						margin-top: 6px;
						font-size: 12px;
						color: #2493F1;
					}
				}

				.askFor {
					padding: 20rpx 20rpx 0 20rpx;

					.addr {
						// width: 65%;
						margin-right: 5%;
						font-size: 34rpx;
						font-weight: bold;
						word-break: break-all;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						/* 这里是超出几行省略 */
						overflow: hidden;
					}

					.content {
						width: 30%;

						.map {
							width: 200rpx;
							height: 200rpx;
						}
					}
				}

				.time {
					padding: 0 20rpx;

					.left {
						width: 20%;
						padding-right: 2%;
						box-sizing: border-box;
						border-right: 1rpx solid #E8E8E8;

						view:first-child {
							color: #898989;
							font-size: 26rpx;
						}
					}

					.right {
						width: 80%;
						padding-left: 5%;
						box-sizing: border-box;

						view:first-child {
							color: #898989;
							font-size: 26rpx;
						}
					}
				}

				.agree {
					padding: 20rpx;
					font-size: 26rpx;
					color: #646464;

					checkbox {
						margin-right: 5rpx;
						transform: scale(0.8);
					}

					text {
						color: #757E92;
					}
				}
			}
		}

		.head-bottom.selectOne {
			border-top-left-radius: 0;
			border-top-right-radius: px;
		}

		.head-bottom.selectTow {
			border-top-left-radius: 6px;
			border-top-right-radius: 0;
		}

		.head-bottom.selectOne {
			border-top-left-radius: 0;
			border-top-right-radius: px;
		}

		.head-bottom.selectThree {
			border-top-left-radius: 6px;
			border-top-right-radius: 6px;
		}
	}

	.store {
		display: flex;
		flex-direction: column;

		.name {
			padding: 4px 0 0px;
			font-size: 14px;
			margin-bottom: 10px;

			img {
				width: 30px;
				height: 30px;
				border-radius: 50%;
				margin-right: 5px;
			}
		}

		.goods-box {
			.goods-item {
				margin-top: 20px;
				display: flex;
				flex-direction: row;

				.left {
					width: 60px;
					height: 60px;

					image {
						border-radius: 4px;
						overflow: hidden;
						width: 100%;
						height: 100%;
						background-color: #f1f1f1;
					}
				}

				.right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					padding-left: 14px;

					.row1 {
						display: flex;
						flex-direction: row;
						justify-content: space-between;

						.tit {
							font-size: 14px;
							color: #333333;
							font-weight: bold;
							flex: 1;
							flex-wrap: wrap;

							.zk {
								padding: 1px 3px;
								font-size: 10px;
								margin-right: 8px;
								border-radius: 4px;
								background-color: #F9221D;
								color: #ffffff;
							}
						}

						.old-price {
							padding-left: 12px;
							font-size: 14px;
							color: #888888;
							font-weight: bold;

							.lt {
								text-decoration: line-through;
							}

							.fh {
								font-size: 10px;
							}
						}

						.price {
							font-size: 16px;
							padding-left: 12px;
							color: #333333;
							font-weight: bold;

							.fh {
								font-size: 10px;
							}
						}
					}

					.row2 {}

					.row3 {
						font-size: 10px;
						color: #888888;
					}
				}
			}

			.goods-item:first-child {
				margin: 0;
			}
		}

		.peisong {
			.right {
				font-size: 14px;
				font-weight: bold;
			}

			.left {
				font-size: 16px;
				font-weight: bold;

				.fh {
					font-size: 10px;
				}
			}
		}

		.zhekou-box {
			.zhekou {
				display: flex;
				flex-direction: column;
				margin-top: 12px;

				.row1 {
					align-items: center;

					.left {
						display: flex;
						flex-direction: row;
						align-items: center;
						height: 20px;
						line-height: 20px;

						i {
							font-size: 16px;
							color: #ff5722;
						}

						.tit {
							font-weight: bold;
							margin-left: 6px;
							font-size: 14px;
							color: #333;
						}
					}

					.right {
						.tag1 {
							font-weight: bold;
							font-size: 14px;
							color: #ff5722;
						}
					}
				}

				.row2 {

					height: 20px;
					line-height: 20px;
					font-size: 12px;
					color: #888;
				}

			}

			.zhekou:first-child {
				margin: 0;
			}
		}

		.coupon-t {
			margin-bottom: 5px;

			.left {
				color: #888;
				font-size: 14px;
			}

			.right {
				text.t {
					padding: 2px 10px;
					background: #FF754F;
					border-radius: 10px;
					color: #fff;
					font-size: 12px;
				}
			}
		}

		.totalbox {
			align-items: flex-end;

			.left {
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 14px;
				color: #888;

				[class*="hxicon-"] {
					color: #aaa;
					margin-left: 4px;
					font-size: 16px;
				}
			}

			.right {
				display: flex;
				flex-direction: row;
				align-items: flex-end;

				.yh {
					color: #ff5722;

					.txt {

						color: #000;
						font-size: 15px;
					}

					.fh {
						font-weight: bold;
						margin-left: 3px;
						font-size: 13px;
					}

					.num {
						font-weight: bold;
						font-size: 18px;
					}
				}

				.total {
					margin-left: 16px;
					color: #333;

					.txt {
						font-size: 15px;
					}

					.fh {
						margin-left: 3px;
						font-size: 12px;
						font-weight: bold;
					}

					.num {
						font-weight: 900;
						font-size: 22px;
					}
				}
			}
		}
	}

	.privacy {
		display: flex;
		flex-direction: column;

		.row1 {
			align-items: flex-end;

			.left {
				display: flex;
				flex-direction: row;
				align-items: center;

				.icon1 {
					color: #444;
					font-size: 24px;
				}

				.icon2 {
					color: #aaa;
					margin-left: 6px;
					font-size: 16px;
				}

				.txt {
					color: #333;
					margin-left: 6px;
					font-weight: bold;
					font-size: 14px;
				}
			}

			.right {}
		}

		.row2 {
			margin-top: 4px;
			color: #888;
			font-size: 12px;
		}

		.row3 {
			margin-top: 8px;
			font-size: 12px;
			color: #2493F1;
		}
	}

	.other-box {
		display: flex;
		flex-direction: column;

		.row {
			align-items: center;

			.left {
				font-size: 14px;
				color: #333;
				font-weight: bold;
				flex: 1;
			}

			.right {
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				align-items: center;
				flex-wrap: wrap;
				width: 60%;
				font-size: 14px;
				display: flex;
				flex-direction: row;
				color: #aaa;
				text-align: right;

				[class*="hxicon-"] {
					position: relative;
					top: 2px;
					font-size: 14px;
				}
			}
		}
	}

	.body-end {
		height: 100px;
	}

	.foot {
		z-index: 11;
		position: fixed;
		display: flex;
		flex-direction: row;
		border-radius: 50px;
		overflow: hidden;
		bottom: 12px;
		left: 12px;
		right: 12px;
		height: 50px;

		.left {
			padding: 0 12px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			background-color: #222222;
			flex: 1;

			.price {
				display: flex;
				flex-direction: row;
				align-items: baseline;
				color: #fff;
				height: 25px;
				line-height: 25px;

				.fh {
					font-weight: bold;
					font-size: 12px;
				}

				.txt {

					font-size: 22px;
					font-weight: bold;
				}
			}

			.discount {
				margin-left: 2px;
				font-size: 10px;
				color: #bbb;
			}
		}

		.center {
			display: flex;
			align-items: center;
			background-color: #444;
			color: #FFC107;
			font-weight: bold;
			font-size: 16px;
			padding-left: 15px;
			padding-right: 15px;
			transition: all 0.3s;
		}

		.center:active {
			background-color: #666;
		}

		.right {
			display: flex;
			align-items: center;
			color: #fff;
			font-weight: bold;
			font-size: 16px;
			padding-left: 15px;
			padding-right: 15px;
			transition: all 0.3s;
			background: linear-gradient(45deg, #2493F1, #2493F1);
		}

		.right:active {
			background: linear-gradient(45deg, #2493F1, #2493F1);
		}
	}
	.popup-coupon {
	
		.title {
			text-align: center;
			margin: 0 auto 30rpx;
			padding-top: 20rpx;
		}
	
		.list {
			height: 400rpx;
			overflow-y: auto;
			box-sizing: border-box;
			padding-bottom: 20rpx;
			.item {
				margin: 0 auto 10rpx;
				background: #fff;
				box-shadow: 0 0 20rpx 20rpx #F9F9F9;
				border-radius: 20rpx;
				width: 94%;
				padding: 20rpx 0 20rpx 30rpx;
				box-sizing: border-box;
	
				.left {
					margin-right: 60rpx;
					white-space: nowrap;
	
					view:first-child {
						color: #FB452E;
						font-size: 36rpx;
					}
	
					view:last-child {
						color: #9C9C9C;
						font-size: 24rpx;
					}
				}
	
				.middle {
					white-space: nowrap;
	
					view:first-child {
						color: #333;
						font-weight: bold;
						font-size: 30rpx;
					}
	
					view:last-child {
						color: #FB452E;
						font-size: 24rpx;
					}
				}
	
				.right {
					width: 30%;
					border-left: 1rpx dashed #EAEAEA;
					position: relative;
					text-align: right;
					padding-right: 20rpx;
					text {
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
					}
				}
			}
		}
	}
</style>